<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<base href="<%=basePath%>">
<title>Insert title here</title>
<%@include file="../common.jsp"%>

</head>
<body>
<script type="text/javascript">
	$(function() {
		$("#sysUserList").datagrid({
			url : "sysUser/list",
			fitColumns : true,
			pagination : true,
			toolbar : "#toolbar"
		});
	});

	function roleFormatter(value, row, index) {
		if (value == null || value.length == 0) {
			return "-";
		}
		var str = "";
		$.each(value, function(i) {
			str += this.name;
			if (i < value.length - 1) {
				str += ",";
			}
		});
		return str;
	}

	function setCondition() {
		var roleids = $("#roles").combobox("getValues");
		console.log(roleids);
		var postData = {
			"username" : $("#username").val()
		};

		$.each(roleids, function(i) {
			postData["sysRoles[" + i + "].id"] = this;
		});

		$("#sysUserList").datagrid("reload", postData);
	}

	function resetCondition() {
		$("#conditionForm").form("clear");
	}

	function batchDelete() {
		var rows = $("#sysUserList").datagrid("getSelections");
		if (rows.length == 0) {
			$.messager.alert("提示", "请选择要删除的数据", "info");
			return;
		}
		$.messager.confirm("提示", "确定要删除吗？", function(r) {
			if (r) {
				var postData = "";
				$.each(rows, function(i) {
					postData += "ids=" + this.id;
					if (i < rows.length - 1) {
						postData += "&";
					}
				});
				$.post("sysUser/batchDelete", postData, function(data) {
					$("#sysUserList").datagrid("reload");
				});
			}
		});
	}

	function add() {
		var d = $("<div></div>").appendTo("body");
		d.dialog({
			title : "添加",
			iconCls : "icon-add",
			width : 500,
			height : 300,
			modal : true,
			href : "sysUser/form",
			onClose : function() {
				$(this).dialog("destroy");
			},
			buttons : [ {
				text : "确定",
				iconCls : "icon-ok",
				handler : function() {
					$("#sysUserForm").form("submit", {
						url : "sysUser/add",
						success : function(data) {
							d.dialog("close");
							$("#sysUserList").datagrid("reload");
						}
					})
				}
			}, {
				text : "取消",
				iconCls : "icon-cancel",
				handler : function() {
					d.dialog("close");
				}
			} ]
		});
	}

	function edit() {
		var row = $("#sysUserList").datagrid("getSelected");
		if (row == null) {
			return;
		}
		var d = $("<div></div>").appendTo("body");
		d.dialog({
			title : "修改",
			iconCls : "icon-update",
			width : 500,
			height : 300,
			href : "sysUser/form",
			modal : true,
			onClose : function() {
				$(this).dialog("destroy");
			},
			onLoad : function() {
				//当异步加载的页面回来以后
				$.post("sysUser/view/" + row.id, function(data) {
					$("#sysUserForm").form("load", data);
					//数据格式转换
					var ids = new Array();
					$.each(data.sysRoles, function() {
						ids.push(this.id);
					});
					console.log(ids);
					$("#role_form").combobox("setValues", ids);
				});
			},
			buttons : [ {
				text : "确定",
				iconCls : "icon-ok",
				handler : function() {
					$("#sysUserForm").form("submit", {
						url : "sysUser/edit",
						success : function(data) {
							d.dialog("close");
							$("#sysUserList").datagrid("reload");
						}
					})
				}
			}, {
				text : "取消",
				iconCls : "icon-cancel",
				handler : function() {
					d.dialog("close");
				}
			} ]
		});
	}
</script>
	<div id="p" class="easyui-panel" title="设置查询条件"
		style="margin-bottom: 15px; padding: 10px;"
		data-options="collapsible:true">

		<form action="" id="conditionForm">
			用户名：<input type="text" name="" id="username"> 角色: <input
				id="roles" class="easyui-combobox"
				data-options="valueField:'id',textField:'name',url:'sysRole/all',panelHeight:'auto',multiple:true,width:300,editable:false">

			<a id="btn" href="javascript:void(0)" onclick="setCondition()"
				class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>
			<a id="btn" href="javascript:void(0)" onclick="resetCondition()"
				class="easyui-linkbutton" data-options="iconCls:'icon-redo'">重置条件</a>
		</form>

	</div>

	<table id="sysUserList">
		<thead>
			<tr>
				<th data-options="checkbox:true,field:'asd'"></th>
				<th data-options="field:'id',width:80,sortable:true">编号</th>
				<th data-options="field:'username',width:100,sortable:true">用户名</th>
				<th data-options="field:'salt',width:80,align:'right'">盐值</th>
				<th
					data-options="field:'sysRoles',width:80,align:'right',formatter:roleFormatter">角色</th>
			</tr>
		</thead>
	</table>


	<div id="toolbar">
		<a id="btn" href="javascript:void(0)" class="easyui-linkbutton"
			data-options="iconCls:'icon-add'" onclick="add()">添加</a> <a id="btn"
			href="javascript:void(0)" class="easyui-linkbutton"
			data-options="iconCls:'icon-edit'" onclick="edit()">编辑</a> <a
			id="btn" href="javascript:void(0)" onclick="batchDelete()"
			class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除</a>
		<a id="btn" href="javascript:void(0)" class="easyui-linkbutton"
			data-options="iconCls:'icon-undo'">导出</a>
	</div>
</body>
</html>